<script setup lang="ts">
import { useEmailCode } from '@/composables'
import { registerByEmailAndVerifyCode } from '@/services/user'
import { useUserStore } from '@/stores'
import { codeRules, emailRules, passwordRules } from '@/utils/rules'
import { showSuccessToast, showToast } from 'vant'
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const email = ref('')
const password = ref('')
const confirmPassword = ref('')
const code = ref('')
const agree = ref(false)

const store = useUserStore()
const router = useRouter()
const route = useRoute()

// 密码的可见与不可见
const isShow = ref(false)

// 发送短信验证码
const { onSend, time, form } = useEmailCode(email)

// 注册提交
const onSubmit = async () => {
  if (!agree.value) return showToast('请勾选协议')
  if (password.value !== confirmPassword.value)
    return showToast('两次输入的密码不一致')
  try {
    // 修改后：
    const res = await registerByEmailAndVerifyCode(
      email.value,
      code.value,
      password.value
    )
    store.setUser(res.data)
    showSuccessToast('注册成功')

    // 修改此处：跳转至登录页并携带邮箱和密码
    router.push({
      path: '/login',
      query: { email: email.value, password: password.value }
    })
    // 注册成功后将time变量清零
    time.value = 0
  } catch (error) {
    showToast('注册失败，请稍后重试')
  }
}
</script>

<template>
  <div class="register-page">
    <cp-nav-bar
      right-text="登录"
      @click-right="$router.push('/login')"
    ></cp-nav-bar>
    <!-- 头部 -->
    <div class="register-head">
      <h3>邮箱注册</h3>
    </div>
    <!-- 表单 -->
    <van-form autocomplete="off" @submit="onSubmit" ref="form">
      <van-field
        name="email"
        v-model="email"
        :rules="emailRules"
        placeholder="请输入邮箱"
        type="email"
      ></van-field>
      <van-field v-model="code" :rules="codeRules" placeholder="邮箱验证码">
        <template #button>
          <span class="btn-send" :class="{ active: time > 0 }" @click="onSend">
            {{ time > 0 ? `${time}s后再次发送` : '发送验证码' }}
          </span>
        </template>
      </van-field>
      <van-field
        v-model="password"
        :rules="passwordRules"
        placeholder="请输入密码"
        :type="isShow ? 'text' : 'password'"
      >
        <template #button>
          <cp-icon
            :name="`register-eye-${isShow ? 'on' : 'off'}`"
            @click="isShow = !isShow"
            style="margin-right: 10px"
          ></cp-icon>
        </template>
      </van-field>
      <van-field
        v-model="confirmPassword"
        :rules="passwordRules"
        placeholder="请再次输入密码"
        :type="isShow ? 'text' : 'password'"
      >
        <template #button>
          <cp-icon
            :name="`register-eye-${isShow ? 'on' : 'off'}`"
            @click="isShow = !isShow"
            style="margin-right: 10px"
          ></cp-icon>
        </template>
      </van-field>
      <div class="cp-cell">
        <van-checkbox v-model="agree">
          <span>我已同意</span>
          <a href="javascript:;">用户协议</a>
          <span>及</span>
          <a href="javascript:;">隐私条款</a>
        </van-checkbox>
      </div>
      <div class="cp-cell">
        <van-button native-type="submit" block round type="primary">
          注 册
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<style lang="scss" scoped>
@use '@/styles/register.scss';
</style>
